import React from "react";
import {designProPage} from "../designProPage";
import {MicroUtils, pathJoin} from "plain-micro-application";
import {PlAlert, PlButton, useDialog} from "plain-design";
import {useGetRouteParams} from "./useGetRouteParams";

/**
 * 定义 private 路由：nav.micro.route({title: '测试private路由', type: NavigatorRouteType.private, path: 'test/test-private-route', route: 'test-private/:id/:code',})
 * 访问 private 路由：http://localhost:3120/private/test-private/aaa/bbb?token=333
 * 定义private路由的时候，path: 的前缀得注册能够被 module application 处理；
 *
 * @author  韦胜健
 * @date    2021/9/4 20:19
 */
export default designProPage((props) => {
    console.log(props)

    const $dialog = useDialog()
    const params = props.page?.param || {}
    const {id, code} = params
    const {getIdAndCode} = useGetRouteParams()

    async function test() {
        const {id, code} = await getIdAndCode()
        const url = pathJoin(window.location.origin, MicroUtils.EntryApplicationPublicPathConfigure.get(), `private/test-private/${id}/${code}?token=kkk`)
        $dialog({
            render: () => <>
                <a href={url} target="_blank">{url}</a>
                <PlAlert>
                    目前gitee不支持browser路由，该url仅在本地调试环境下有效
                    <br/>
                    建议在无痕浏览器或者另外别的为登陆的浏览器中打开该链接
                </PlAlert>
            </>
        })
    }

    return () => <>
        <div className="pro-page-header">
            <h1>Private路由</h1>
            <p>
                系统页签打开需要登陆的页面，需要在url参数中给定token
            </p>
        </div>
        <div className="pro-page-card" style={{paddingBottom: '20px'}}>
            <ul>
                <li>路由参数：{JSON.stringify({id, code})}</li>
                <li>{`定义 private 路由：nav.micro.route({title: '测试home路由', type: NavigatorRouteType.home, path: 'test/test-home-route', route: 'test-home/:id/:code',})`}</li>
                <li>{`定义 private 路由的时候，path: 的前缀得注册能够被 module application 处理；`}</li>
            </ul>
        </div>
        <div className="pro-page-card" style={{paddingBottom: '20px'}}>
            <ul>
                <PlButton onClick={test}>测试跳转</PlButton>
            </ul>
        </div>
    </>
})